<template>
    <div class="goodinfo-cont">
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swipe-my :swipes="swipes"></swipe-my>
                </div>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-header">商品的标题</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：<del>￥2222</del> &nbsp; &nbsp; 活动价：<span class="now">￥999</span>
                    </p>

                    购买数量:
                        <div class="mui-numbox" data-numbox-min='1' >
                            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                            <input class="mui-input-numbox" type="number"/>
                            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                        </div>
                    
                    <p class="btn">
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-header">页眉</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
                </div>
            </div>
            <div class="mui-card-footer">页脚</div>
        </div>
    </div>
</template>

<script>
import swipe from '../swipe/swipe.vue'
import mui from '../../lib/mui/js/mui.min.js'
export default {
    data(){
        return{
            swipes:[],
        }
    },
    created () {
        this.getlunbo()
    },
    mounted() {
        mui(".mui-numbox").numbox().setValue(1)
    },
    methods: {
        getlunbo(){
           this.$http.get("swipe/list").then(result => {
                if (result.data.code === 0) {
                    this.swipes = result.data.data
                } else {
                    Toast("轮播图加载出错！")
                }

            }, err  => {
                Toast("轮播图加载出错！")
            })
        }
    },
    components:{'swipe-my':swipe }
}
</script>

<style lang="less" scoped>
    .goodinfo-cont{
        background-color: #eee;
        overflow: hidden;

        .now{
            color: red;
            font-weight: bold;
        }

        .btn{
            margin-top: 15px;
        }
    }
</style>